<template>
  <div>
    <div v-if="shopping.length===0" style="font-size:30px;"><strong>购物车空空如也,快去<span style="color:red" @click="first">选购</span>吧~</strong></div>
    <div v-else>
      <div v-for="(p,i) in shopping" :key="i" class="s" @click="to(p.sid)" style="display: flex;justify-content: space-between;align-items: center;">
          <div @click.stop>
            <van-checkbox @click="checkOne(p.id)" v-model="p.checked"  />
          </div>
          <div><img :src="p.img" style="width:80px;height:80px;margin-top:4px;margin-left:5%;border-radius:10px"/></div>
          <div class="xq">
            <div>{{p.name}}</div>
            <div style="display:flex;align-items: center;justify-content: space-between;">
              <div style="width:200px;height:40px;" @click.stop>
                <div style="display:flex;align-items: center;justify-content: space-between;">
                  <el-input-number @change="changeNum($event,p.sid)" v-model="p.num" :min="1" :max="10" label="数量"></el-input-number>
                  <i class="el-icon-delete" @click="deleteOne(p.id)"></i>
                </div>
              </div>
              <div style="display:flex;justify-content: center;align-items: center;">￥{{p.price}}</div>
            </div>
          </div>
      </div>
      <div class="bottom">
        <div style="display:flex;align-items: center;width:40%;justify-content: space-between;">
          <div>
            <van-checkbox @click="checkAllFn" :value="isCkeckedAll"/>
          </div>
          <div>
            <div>你选中<span style="color:red">{{total.num}}</span>件商品</div>
            <div>一共<span style="color:red">￥{{total.price}}</span>元</div>
          </div>
        </div>
        <div @click="zf" style="display:flex;align-items:center;justify-content: center;width:25%;height:44px;font-size:25px;background-color: red;color:white;border-radius:10px;">
          去结算
        </div>
      </div>
    </div>
    <!-- {{shopping}} -->
  </div>
</template>

<script>
import axios from 'axios'
import {Toast} from 'mint-ui'
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
  data(){
    return{
      checked:true
    }
  },
  computed:{
    ...mapGetters(['isCkeckedAll','total']),
    ...mapState({
      token:state=>state.user.token,
      shopping:state=>state.shop.shopping,
      loginStatus:state=>state.user.loginStatus,
      list:state=>state.shop.list,
    }),
    goodsList(){
      return this.list.map(p=>this.shopping.find(v => v.id == p))
    }
  },
  created(){
    if(this.loginStatus){
      this.getData()
    } 
  },
  methods:{
    zf(){
      let newList =[]
      this.shopping.map(item=>{
        this.list.forEach(e => {
          if(e == item.id){
            newList.push(item)
          }
        })
      })
      axios({
          url:'/ajax/getOrder',
          method:'post',
          data:{
              arr:newList,
              token:this.token
          }
      }).then(({data})=>{
          console.log(data.data)
          if(!data.success) return;
          this.initOrder(data.data)
          this.initList(this.goodsList)
          this.list.length > 0 ? this.$router.push({name:'order',params:{list:this.list}}) : Toast('请选择商品')   
      })

    },
    ...mapActions(['checkAllFn']),
    ...mapMutations(['cart','checkOne','deleteOne','initOrder','initList']),
    async getData(){
      axios({
        url:'/ajax/selectCart',
        method:'post',
        data:{
          token:this.token
        }
      }).then(({data})=>{
        data.data.forEach(element => {
          element['checked']=true
        });
        this.cart(data.data)
      })
    },
    to(p){
      this.$router.push({name:'shop',params:{id:p}})
    },
    first(){
      this.$router.push('/first')
    },
    changeNum(value,id){
      axios({
        url:'/ajax/updates',
        method:'post',
        data:{
          num:value,
          sid:id,
          token:this.token
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input-number{
    width:100%;
}
.el-input-number__decrease{
    width:15%;
}
.el-input-number__increase{
    width:15%;
}
.el-input-number{
    width:70%;
}
.s{
  background-color: whitesmoke;
  display: flex;
  margin-top:3%;
  border-radius: 10px;
  border-bottom: 5px lightgray solid;
  margin: 0;
  padding: 0;
}
.xq{
  margin-top:4px;
  margin-left:5%
}
.bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position:fixed;
  bottom: 5%;
  width: 100%;
  border-top:1px solid black ;
  border-bottom:1px solid black ;
}

</style>